<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    </head>
     <body>
        <div class="media"><!--媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 -->
         
          <a class="pull-left" href="#"><!-- 媒体对像的对象：是图片 -->
             <img  class="img-responsive;media-object " src="img/sp-photo.png" style="margin-left: 10%;margin-top: 10%;"/>
          </a>
            <div class="media-body" >
            <!--媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容 -->
               <h4 class="media-heading" style="margin-top: 10%">媒体对象</h4>
               <!--媒体对象的标题：使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选 -->
                 <p style="margin-left: 10%;">这里的景区是全国最棒的</p>
            </div>
        </div> 
        </br>
        <div class="media">
           <a class="pull-left" href="#">
              <img class="img-responsive;media-object" src="img/left-p1.jpg" style="margin-left: 10%;"/>
           </a>
          <div class="media-body">
               <h4 class="media-heading">景区对象</h4>
               <p style="margin-left: 10%;">这里的景区是全国最棒的</p>
          </div> 	
        </div>  
         
        <div class="media">
           <a class="pull-left" href="#">
              <img class="img-responsive;media-object" src="img/u=2839452391,1305396036&fm=23&gp=0.jpg" style="margin-left: 10%;"/>
           </a>
          <div class="media-body">
               <h4 class="media-heading">景区对象</h4>
               <p style="margin-left: 10%;">这里的景区是全国最棒的</p>
          </div> 	
        </div>  
        
        
              
    </body>
</html>